<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title>form表单</title>
		<link rel="stylesheet" href="css/X-ui.css" />
		<link rel="stylesheet" href="css/article-xq.css" />
		<!--弹窗-->
		<link rel="stylesheet" href="js/extend/X-ui-modal/css/hxui-modal.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="js/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<form class="x-ui-form form">
			<!--碎片栏-->
			<ol class="breadcrumb-nav">
				<li>
					<a href="">主页</a>
				</li>
				<li>
					<a href="">文章管理</a>
				</li>
				<li>
					添加文章
				</li>
			</ol>
			<div class="row">
				<h3 class="col-offset-1">input输入框</h3>
				<div class="row cl">
					<label class="form-label col-2 col-offset-1">
						<i class="iconfont">&#xe606;</i>
						请输入文章标题
					</label>
					<div class="col-8">
						<input type="text" required name="title" placeholder="请输入文章标题" class="input-text"/>
						<span class="form-tips">标题不能少于五个字</span>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-2 col-offset-1">
						文章状态
					</label>
					<div class="col-8">
						<input disabled type="text" name="zt" placeholder="这个为禁用状态" class="input-text"/>
						<span class="form-tips">文章状态</span>
					</div>
				</div>
				<!--邮箱-->
				<div class="row cl">
					<label class="form-label col-2 col-offset-1">
						邮箱
					</label>
					<div class="col-8">
						<input type="text" name="eamil" required class="input-text"/>
						<span class="form-tips">请输入邮箱</span>
					</div>
				</div>
				<!--手机-->
				<div class="row cl">
					<label class="form-label col-2 col-offset-1">
						手机
					</label>
					<div class="col-8">
						<input type="text" name="mobile" required class="input-text"/>
						<span class="form-tips">请输入mobile</span>
					</div>
				</div>
				<!--密码长度验证-->
				<div class="row cl">
					<label class="form-label col-2 col-offset-1">
						密码
					</label>
					<div class="col-8">
						<input type="text" required name="password" class="input-text"/>
						<span class="form-tips">密码长度为6-20</span>
					</div>
				</div>
				<!--textarea-->
				<h3 class="col-offset-1">textarea</h3>
				<div class="row cl">
					<label class="form-label col-10 col-offset-1 text-l">文章内容</label>
					<div class="col-10 col-offset-1" id="article-info">
						<textarea class="textarea" placeholder="请输入文章内容"></textarea>
						<span class="form-tips">标题不能少于五个字</span>
					</div>
				</div>
				<h3 class="col-offset-1">checkbox多选框</h3>
				<!--checkbox-->
				<div class="row cl">
					<label class="form-label col-10 col-offset-1 text-l">
						文章状态
					</label>
					<div class="col-10 col-offset-1 mt-20">
						<div class="form-checkbox">
							<label class="form-label">选中</label>
							<input value="001" type="checkbox" checked name="checkbox" />
						</div>
						<div class="form-checkbox">
							<label class="form-label">不选中</label>
							<input value="002" type="checkbox" name="checkbox" />
						</div>
						<div class="form-checkbox">
							<label class="form-label">禁用</label>
							<input value="003" disabled  type="checkbox" name="checkbox" />
						</div>
						<div class="form-checkbox">
							<label class="form-label">选中禁用</label>
							<input value="004" disabled checked type="checkbox" name="checkbox" />
						</div>
					</div>
				</div>
				<!--select-->
				<h3 class="col-offset-1">下拉选择</h3>
				<div class="row cl">
					<div class="col-10 col-offset-1">
						<div class="form-select">
							<select name="select1">
								<option value="10-1">001</option>
								<option value="10-2">002</option>
								<option value="10-3">003</option>
							</select>
						</div>
						<div class="form-select">
							<select disabled name="select2">
								<option value="001">001</option>
								<option value="002">002</option>
								<option value="003">003</option>
							</select>
						</div>
						<div class="form-select">
							<select name="select1">
								<option value="11-1">001</option>
								<option value="11-2">02</option>
								<option value="11-3">003</option>
							</select>
						</div>
						<div class="form-select">
							<select name="select1">
								<option value="1-1">001</option>
								<option value="1-2">002</option>
								<option value="1-3">003</option>
								<option value="1-4">004</option>
								<option value="1-5">005</option>
							</select>
						</div>
					</div>
				</div>
				<h3 class="col-offset-1">按钮</h3>
				<div class="row">
					<!--按钮-->
					<div class="btn btn-submit col-offset-1" id="submit">提交</div>
					<div style="padding-bottom:200px"></div>
				</div>
			</div>
		</form>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<!--弹窗-->
		<script type="text/javascript" src="js/extend/X-ui-modal/js/X-ui-modal.js" ></script>
		<script type="text/javascript" src="js/H-ui-form.js" ></script>
		<script>
			var form = new XuiForm();
			//多选函数调用
			form.checkbox();
			//select
			form.select();
			//表单验证和提交(第一个参数为form的class或者id)
			/*
				参数说明:
					第一个:表单的id或者class
					第二个:提交的按钮
					第三个:json数组验证条件
					第四个:验证失败提示
					第五个:验证通过的回调函数(接受一个参数-参数为表单的所有参数)
					第六个：非必填 布尔值 (true为开启回车键提交表单 默认false)
			
			*/
			form.verification(".form" , "#submit" , { 
				/*参数名为input的name  值为验证条件*/
				/*集成的正则有手机(mobile)和邮箱(eamil)还有电话(telephone)*/
				eamil : "eamil",
				mobile : "mobile",
				/*如果是长度验证那么就是一个json max为最大长度 min为最小长度*/
				password : {
					max : 20,
					min : 6
				}
			},{
				/*input的name名称  值为json*/
				eamil : {
					/*为空*/
					empty : "请输入邮箱",
					/*正则验证失败*/
					error : "请输入正确的邮箱"
				},
				mobile : {
					empty : "请输入手机号",
					error : "请输入正确的手机号码"
				},
				password : {
					/*长度为空*/
					empty : "密码不能为空",
					/*长度小于最小值提示*/
					min : "没学数学么？密码少了",
					/*长度最大值提示*/
					max : "没学数学么？密码多了"
				}
			},function(data){
				console.log(data);
			},true);
		</script>
	</body>
</html>
